<template>
  <div class="content">
    <Crud :tbColumns="tbColumns" ref="crud" title="组织机构" :baseUrl="baseUrl" :refreshUrl="refreshUrl" @editChange="onEditChange">
      <template slot="formItems" slot-scope="{record}">
        <a-row :gutter="24">
          <a-col :span="12" v-if="isEdit">
            <a-form-item label="编号" v-bind="formItemLayout">
              <a-input-number :disabled="isEdit" placeholder="请输入编号" @change="(val)=>record['id'] = val" style="width:100%"
                v-decorator="['id', {initialValue: record.id, rules: [{ required: true, type: 'integer', message: '编号为整数'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="名称" v-bind="formItemLayout">
              <a-input placeholder="请输入名称" @change="(val)=>record['name'] = val.target.value"
                v-decorator="['name', {initialValue: record.name, rules: [{ required: true,  message: '名称不能为空', whitespace: false}]}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="经度" v-bind="formItemLayout">
              <a-input placeholder="请输入经度" @change="(val)=>record['lng'] = val.target.value"
                v-decorator="['lng', {initialValue: record.lng, rules:formRules.lng}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="纬度" v-bind="formItemLayout">
              <a-input placeholder="请输入纬度" @change="(val)=>record['lat'] = val.target.value"
                v-decorator="['lat', {initialValue: record.lat, rules:formRules.lat}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="详细地址" v-bind="formItemLayout">
              <a-input placeholder="请输入详细地址" @change="(val)=>record['location'] = val.target.value"
                v-decorator="['location', {initialValue: record.location}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="上级部门" v-bind="formItemLayout">
              <a-tree-select placeholder="请选择上级部门" :loadData="onLoadData" :treeData="treeData"
                :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" @change="(value, label)=>record['parent'] = {id : value, name : label[0] }"
                v-decorator="['parent', {initialValue: getValueOfObj(record.parent), rules: [{ required: true,  message: '上级部门不能为空', whitespace: false}]}]">
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item v-bind="formItemLayout" style="padding-top: 30px;">
              <a-checkbox v-decorator="['disable', {initialValue: record.disable }]" @change="(e)=>record['disable'] = e.target.checked">禁用
              </a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
      </template>
    </Crud>
  </div>

</template>

<script>
import Crud from '@/components/container/Crud';
import CrudMixin from '@/components/container/CrudMixin.js';
import treeApi from '@/api/tree';

export default {
  name: 'regionCrud',
  components: { Crud },
  mixins: [CrudMixin],

  data() {
    return {
      refreshUrl: 'region/{id}/children',
      baseUrl: 'region/',
      tbColumns: [
        { title: '名称', dataIndex: 'name', fixed: 'left', width: 120 },
        { title: '上级部门', dataIndex: 'parent.name', width: 150 },
        { title: '详细地址', dataIndex: 'location', width: 280 },
        { title: '经度', dataIndex: 'lng', width: 100 },
        { title: '纬度', dataIndex: 'lat', width: 100 },
        { title: '停用', dataIndex: 'disable', scopedSlots: { customRender: 'disable' } }
      ],
      treeData: [],
      formRules: {
        lng: [this.$formRules.lng],
        lat: [this.$formRules.lat]
      }
    };
  },

  mounted() {
    this.treeLoad();
  },

  methods: {
    treeLoad() {
      treeApi.loadTreeByRoot('/region').then(res => {
        this.treeData = this.insertIconAndValue(res.data);
      });
    },
    onLoadData(treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        let data = treeNode.dataRef;
        let params = { id: data.id, level: data.clz };
        treeApi.loadTreeByParent('/region', params).then(res => {
          treeNode.dataRef.children = this.insertIconAndValue(res.data);
          this.treeData = [...this.treeData];
          resolve();
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
a {
  vertical-align: middle;
}
</style>
